<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">
    <h:form>
        <p:panel>
            <table border="0" cellspacing="5">
                <tbody>
                    <tr>
                        <td style="vertical-align: top">
                            <h:panelGrid columns="2" rendered="#{!blackListBean.edit}">
                                Danh sách*  <p:inputTextarea maxHeight="100" value="#{blackListBean.mdnList}" 
                                                             required="true" requiredMessage="Danh sách quảng bá không được để trống"/>
                                <h:outputText/>
                                Lưu ý: mỗi số trong danh sách<br/> được cách nhau bởi dấu xuống dòng.
                            </h:panelGrid>
                            <h:panelGrid columns="2"  rendered="#{blackListBean.edit}">
                                MSISDN*  <p:inputText value="#{blackListBean.selected.msisdn}" 
                                                      required="true" requiredMessage="MSISDN không được để trống"/>
                            </h:panelGrid>
                        </td>
                        <td style="vertical-align: top">
                            <h:panelGrid columns="2">
                                Ngày kết thúc hiệu lực*
                                <p:calendar value="#{blackListBean.selected.endEffect}" pattern="dd/MM/yyyy HH:mm:ss" timeZone="Asia/Saigon" navigator="true"
                                            required="true" requiredMessage="Bạn chưa điền ngày hết hiệu lực"/>
                            </h:panelGrid>
                        </td>
                    </tr>
                </tbody>
            </table>

            <h:panelGrid columns="5">
                <p:commandButton ajax="false" value="Thêm mới" rendered="#{!blackListBean.edit}" action="#{blackListBean.insertList()}"/>
                <p:commandButton ajax="false" value="Cập nhật" rendered="#{blackListBean.edit}" action="#{blackListBean.edit()}"/>
                <p:commandButton ajax="false" value="Hủy bỏ" immediate="true" action="#{blackListBean.resetToCreateForm()}"/>
            </h:panelGrid>
        </p:panel>
    </h:form>
    <br/>
    <h:form>
        <p:dataTable id="table" value="#{blackListBean.list}" var="item" paginator="#{blackListBean.list.size() >20}" rows="20" 
                     selection="#{blackListBean.selectedList}" selectionMode="multiple" rowKey="#{item.id}">

            <f:facet name="header">  
                <div align="left">
                    <p:menuButton value="Xử lý bản ghi được chọn">  
                        <p:menuitem ajax="false" value="Chỉnh sửa" icon="ui-icon ui-icon-pencil" action="#{blackListBean.prepareEdit()}">
                            <f:setPropertyActionListener target="#{tabBean.activeIndex}" value="0"/>
                        </p:menuitem>  
                        <p:menuitem value="Xóa" icon="ui-icon ui-icon-close" onclick="blackListDeleteConfirm.show()" />   
                    </p:menuButton> 
                </div>
            </f:facet> 

            <f:facet name="footer">  
                <div align="left">
                    <p:menuButton value="Xử lý bản ghi được chọn">  
                        <p:menuitem ajax="false" value="Chỉnh sửa" icon="ui-icon ui-icon-pencil" action="#{blackListBean.prepareEdit()}"/>
                        <p:menuitem value="Xóa" icon="ui-icon ui-icon-close" onclick="blackListDeleteConfirm.show()" />   
                    </p:menuButton> 
                </div>
            </f:facet> 

            <p:column headerText="MSISDN" sortBy="#{item.msisdn}" filterBy="#{item.msisdn}" filterMatchMode="contains" >
                #{item.msisdn}
            </p:column>
            <p:column headerText="Kết thúc hiệu lực" sortBy="#{item.endEffect}">
                <h:outputText value="#{item.endEffect}">
                    <f:convertDateTime pattern="dd/MM/yyyy HH:mm:ss" timeZone="Asia/Saigon"/>
                </h:outputText>
            </p:column>
        </p:dataTable>

        <p:confirmDialog message="Bạn muốn xóa các bản ghi đã chọn?"  
                         header="Xác nhận" severity="alert" widgetVar="blackListDeleteConfirm">  

            <p:commandButton update="table" value="Có" oncomplete="blackListDeleteConfirm.hide()"  
                             action="#{blackListBean.remove()}" />
            <p:commandButton value="Không" onclick="blackListDeleteConfirm.hide()" type="button" />   

        </p:confirmDialog> 

    </h:form>
</html>

